<template>
	<div id="props">
		<h2>这个是父页面的内容</h2>
		<div style="border: 1px solid red;width: 100%;height: 200px;">
			<button v-on:click="test1()">点击传数据给组件</button>
			<p v-text="parentMessage3"></p>
			<p v-text="parentMessage4"></p>
		</div>
		<h2>这个是组件的内容</h2>
		<div style="border: 1px solid green;width: 100%;height: 200px;">
			<propsTest :parentMessage="parentMessage" :parentMessage2="parentMessage2" v-on:listen="myVar">
			</propsTest>
		</div>
	</div>
</template>

<script>
	import propsTest from '@/components/propsTest'
	export default {
		name: 'props',
		components: {
			propsTest
		},
		data() {
			return {
				parentMessage: '我是来自父页面的消息',
				parentMessage2: '',
				parentMessage3: '',
				parentMessage4: ''
			}
		},
		methods: {
			test1() {
				this.parentMessage2 = "我是父页面传过来的数据";
			},
			myVar(data) {
				// 在组件中的标签中监听该自定义事件并添加一个响应该事件的处理方法
				this.parentMessage3 = "我是组件传过来的数据";
				// 这里是组件的自定义事件中传过来的参数
				this.parentMessage4 = data;
			}
		}
	}
</script>

<style>

</style>